<template>
  <view class="root">
    <view class="content-wrapper">
      <view class="top">
        <view class="t-left">
          <view class="c-name">{{ options.bName }}</view>
          <view class="c-address">{{ options.roomName }}</view>
        </view>
        <image :src="`${baseImgUrl}/shiyoufangwu3.png`" class="c-home"></image>
      </view>
      <view class="middle">
        <image class="m-avatar"
          :src="personInfo.fFaceUrl ? `${imgPrefix}${personInfo.fFaceUrl}` : `${baseImgUrl}queryFace-01.png`"
          @click="pvwImage([personInfo.fFaceUrl ? `${imgPrefix}${personInfo.fFaceUrl}` : `${baseImgUrl}queryFace-01.png`])">
        </image>
        <view class="m-title">身份信息</view>
        <view class="list-item">
          <view class="m-label">姓 名:</view>
          <view class="m-value">{{ personInfo.fXm }}</view>
        </view>
        <!-- <view class="list-item">
          <view class="m-label">曾 用 名:</view>
          <view class="m-value">{{ personInfo.fCym ? personInfo.fCym : '无' }}</view>
        </view> -->
        <view class="list-item">
          <view class="m-label">性 别:</view>
          <view class="m-value">{{ personInfo.fXbdm }}</view>
        </view>
        <view class="list-item">
          <view class="m-label">年 龄:</view>
          <view class="m-value">{{ personInfo.getAge }}</view>
        </view>
        <view class="list-item">
          <view class="m-label">民 族:</view>
          <view class="m-value">{{ personInfo.fMzdmName }}</view>
        </view>
        <view class="list-item">
          <view class="m-label">联系电话:</view>
          <view class="m-value">{{ personInfo.fLxdh ? personInfo.fLxdh : '暂未添加' }}</view>
        </view>
        <view class="list-item">
          <view class="m-label">身份证号:</view>
          <view class="m-value">{{ encryptIDCard(personInfo.fGmsfhm) }}</view>
        </view>
        <!-- <view class="list-item">
          <view class="m-label">户籍地址:</view>
          <view class="m-value">{{ personInfo.fHjdzQhnxxdz }}</view>
        </view>
        <view class="list-item">
          <view class="m-label" style="width: auto;">户籍地所属区县:</view>
          <view class="m-value">{{ personInfo.fHjdzSsxqdmName }}</view>
        </view> -->
      </view>
      <view class="down">
        <view class="m-title">居住信息</view>
        <!-- <view class="d-item">
          <view class="d-label">人户情况:</view>
          <view class="d-value">{{ personInfo.fRylxName }}</view>
        </view>
        <view class="d-item">
          <view class="d-label">人口类型:</view>
          <view class="d-value">{{ personInfo.fRylxTypeName }}</view>
        </view>
        <view class="d-item">
          <view class="d-label">是否落户:</view>
          <view class="d-value">{{ personInfo.fIsSettleName }}</view>
        </view> -->
        <view class="d-item">
          <view class="d-label">与房主关系:</view>
          <view class="d-value">{{ personInfo.fTgryfzgxName }}</view>
        </view>
        <!--  <view class="d-item">
          <view class="d-label">现居地址:</view>
          <view class="d-value">{{ personInfo.fXjzdz ? personInfo.fXjzdz : '暂未添加' }}</view>
        </view> -->
      </view>
      <!-- <view class="middle">
        <view class="m-title">基本信息</view>
        <view class="list-item">
          <view class="m-label">文化程度:</view>
          <view class="m-value">{{ personInfo.fXldmName ? personInfo.fXldmName : "暂未添加" }}</view>
        </view>
        <view class="list-item">
          <view class="m-label">政治面貌:</view>
          <view class="m-value">{{
            personInfo.fZzmmdmName ? personInfo.fZzmmdmName : "暂未添加"
          }}</view>
        </view>
        <view class="list-item">
          <view class="m-label">婚姻状况:</view>
          <view class="m-value">{{
            personInfo.fHyzkdmName ? personInfo.fHyzkdmName : "暂未添加"
          }}</view>
        </view>
        <view class="list-item">
          <view class="m-label">身 高:</view>
          <view class="m-value">{{personInfo.fSg ? `${personInfo.fSg}cm` : "暂未添加" }}</view>
        </view>
        <view class="list-item">
          <view class="m-label">血 型:</view>
          <view class="m-value">{{ personInfo.fXxName ? personInfo.fXxName : "暂未添加" }}</view>
        </view>
        <view class="list-item">
          <view class="m-label">宗教信仰:</view>
          <view class="m-value">{{ personInfo.fZjxyName ? personInfo.fZjxyName : "暂未添加" }}</view>
        </view>
        <view class="list-item">
          <view class="m-label">兵役情况:</view>
          <view class="m-value">{{ personInfo.fByzkName ? personInfo.fByzkName :  "暂未添加" }}</view>
        </view>
        <view class="list-item">
          <view class="m-label">工作单位:</view>
          <view class="m-value">{{ personInfo.fCyzkDwmc ? personInfo.fCyzkDwmc :  "暂未添加" }}</view>
        </view>
        <view class="list-item">
          <view class="m-label">职业类别:</view>
          <view class="m-value">{{
            personInfo.fCyzkZylbdmName ? personInfo.fCyzkZylbdmName : "暂未添加"
          }}</view>
        </view>
      </view> -->
      <view class="middle">
        <view class="m-title">采集信息</view>
        <view class="list-item">
          <view class="m-label">采集人员:</view>
          <view class="m-value">{{ personInfo.fCjrxm }} （{{personInfo.fCjrxmType}}）</view>
        </view>
        <view class="list-item">
          <view class="m-label">采集时间:</view>
          <view class="m-value">{{
            personInfo.fCjsj
              ? formatters(personInfo.fCjsj, "YY-MM-DD HH:mm:ss")
              : ""
          }}</view>
        </view>
      </view>
    </view>
    <view class="button-wrapper" v-if="options.isMain == '1'">
      <view class="btn-l" @click="handleEditPopulation">
        <!-- <image src="" class="btn-icon"></image> -->
        <u-icon name="edit-pen" class="btn-icon" width="33" height="33"></u-icon>
        <view class="btn-text">编辑人员信息</view>
      </view>
      <view class="btn-r" @click="handleRemove">
        <!-- <image src="" class="btn-icon"></image> -->
        <u-icon name="minus-circle" class="btn-icon" width="33" height="33"></u-icon>
        <view class="btn-text">移除当前人员</view>
      </view>
    </view>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import {
    deletePersonInfo,
    getIdPersonInfo
  } from "../../api/api";
  import {
    isLoading,
    formatters,
    pvwImage,
    popup,
    Toast,
    navBack,
    encryptIDCard
  } from "../../utils/util";
  export default {
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        imgPrefix: uni.getStorageSync("imgPrefix"),
        options: {},
        personInfo: {},
      };
    },
    onLoad(options) {
      this.options = options;
    },
    onShow() {
      this.initPage();
    },
    methods: {
      encryptIDCard,
      formatters,
      initPage() {
        let params = {
          fId: this.options.fId,
        };
        isLoading();
        getIdPersonInfo(params)
          .then((res) => {
            this.personInfo = res.result;
          })
          .finally(() => {
            isLoading(false);
          });
      },
      handleEditPopulation() {
        uni.navigateTo({
          url: `/selfInfo/myHouse/addActualPopulation?type=edit&addressInfo=${encodeURIComponent(
          JSON.stringify(this.options)
        )}&fId=${this.options.fId}`,
        });
      },
      handleRemove() {
        popup(() => {
          let params = {
            fId: this.options.fId,
          };
          isLoading();
          deletePersonInfo(params).then((res) => {
            if (res.code == 200) {
              Toast("移除成功！", "success");
              navBack();
            } else {
              uni.showModal({
                title: '提示', //标题
                content: res.message, //提示内容
                showCancel: false //不显示取消按钮
              })
            }
          });
          isLoading(false);
        }, "请确认是否移除当前人员？");
      },
      pvwImage,
    },
  };
</script>

<style lang="scss">
  page {
    background: #f9f9f9;
  }
</style>
<style lang="scss" scoped>
  .root {
    .content-wrapper {
      width: 712rpx;
      margin: 0 auto;
      margin-bottom: 130rpx;

      .top {
        display: flex;
        background: linear-gradient(90deg, #51b1ff 0%, #1790f2 100%);
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        padding: 42rpx 43rpx 44rpx 35rpx;
        justify-content: space-between;

        .c-name {
          font-weight: bold;
          font-size: 36rpx;
          color: #fafafa;
          margin-bottom: 24rpx;
        }

        .c-address {
          font-weight: 500;
          font-size: 28rpx;
          color: #fafafa;
        }

        .c-home {
          width: 128rpx;
          height: 119rpx;
        }
      }
    }

    .m-title {
      font-weight: bold;
      font-size: 36rpx;
      color: #333333;
      margin-bottom: 29rpx;
    }

    .middle {
      padding: 30rpx 20rpx 25rpx 32rpx;
      background: #ffffff;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      margin-top: 10rpx;
      position: relative;

      .m-avatar {
        width: 161rpx;
        height: 171rpx;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        position: absolute;
        top: 98rpx;
        right: 26rpx;
      }

      .list-item {
        display: flex;
        margin-bottom: 20rpx;

        .m-label {
          width: 122rpx;
          font-weight: 500;
          font-size: 28rpx;
          color: #aaaaaa;
          text-align: justify;
          text-align-last: justify;
          margin-right: 16rpx;
          margin-left: 7rpx;
          flex-shrink: 0;
        }

        .m-value {
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
        }
      }
    }

    .down {
      padding: 30rpx 32rpx 21rpx 32rpx;
      background: #ffffff;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      margin-top: 10rpx;

      .d-item {
        display: flex;
        margin-bottom: 20rpx;

        .d-label {
          font-weight: 500;
          font-size: 28rpx;
          color: #aaaaaa;
          margin-right: 16rpx;
          width: 150rpx;
          text-align: right;
          margin-left: -24rpx;
          flex-shrink: 0;
        }
      }
    }

    .button-wrapper {
      height: 120rpx;
      background: #ffffff;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      display: flex;
      position: fixed;
      bottom: 0;
      left: 0;
      align-items: center;
      justify-content: center;
      width: 100%;

      .btn-icon {
        width: 33rpx;
        height: 33rpx;
        margin-right: 10rpx;
      }

      .btn-text {
        line-height: 1;
        margin-left: 10rpx;
      }

      .btn-l,
      .btn-r {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 26rpx;
        color: #000000;
        height: 100%;
      }
    }
  }
</style>